<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
<link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../assets/css/common.css" media="all">


  <title>商品列表</title>
</head>
<body>
<div class="page-layout">
  <div class="page-header">
  <ul class="layui-nav nav-left">
    <li class="layui-nav-item layui-this"><a href="###">控制中心</a></li>
    <li class="layui-nav-item"><a href="###">应用中心</a></li>
    <li class="layui-nav-item"><a href="###">数据中心</a></li>
  </ul>
  <ul class="layui-nav nav-right">
    <li class="layui-nav-item">
      <div class="search-input">
        <input class="layui-input" placeholder="输入关键字搜索" type="text">
      </div>
    </li>
    <li class="layui-nav-item layui-nav-item_icon">
      <a href="#">
        <i><span class="layui-badge-dot"></span><img src="../assets/images/icon_email.png" alt=""></i>
      </a>
    </li>
    <li class="layui-nav-item layui-nav-item_icon">
      <a href="#">
        <i><img src="../assets/images/icon_help.png" alt=""></i>
      </a>
    </li>
    <li class="layui-nav-item layui-nav-item_fgs"></li>
    <li class="layui-nav-item" style="margin-right: 10px">
      <a href="5-扫码主页.html">数码管理</a>
    </li>
    <li class="layui-nav-item layui-nav-item_fgs"></li>
    <li class="layui-nav-item" lay-unselect="">
      <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img"><span class="layui-nav-more"></span></a>
      <dl class="layui-nav-child layui-anim layui-anim-upbit">
        <dd><a href="6-账户信息.html">账户信息</a></dd>
        <dd><a href="6-资质管理.html">资质管理</a></dd>
        <dd><a href="javascript:;">通用设置</a></dd>
        <dd><a href="javascript:;">修改密码</a></dd>
        <dd><a href="javascript:;">退出账号</a></dd>
      </dl>
    </li>
  </ul>
</div>
  <div class="page-side">
    <div class="side-left">
        <a class="logo" href="/">
            <img src="../assets/images/logo.png" alt="">
        </a>
        <ul class="layui-nav layui-nav-tree">
            <li data-navid="nav_item01" class="layui-nav-item"><a href="javascript:;"><i class="side_icon"><img
                    src="../assets/images/side_icon_01.png" alt=""></i>系统概况</a></li>
            <li data-navid="nav_item02" class="layui-nav-item"><a href="javascript:;"><i class="side_icon"><img
                    src="../assets/images/side_icon_02.png" alt=""></i>商品管理</a></li>
            <li data-navid="nav_item03" class="layui-nav-item"><a href="javascript:;"><i class="side_icon"><img
                    src="../assets/images/side_icon_07.png" alt=""></i>数码管理</a></li>
            <li data-navid="nav_item04" class="layui-nav-item"><a href="javascript:;"><i class="side_icon"><img
                    src="../assets/images/side_icon_03.png" alt=""></i>商品秀</a></li>
            <li data-navid="nav_item05" class="layui-nav-item"><a href="javascript:;"><i class="side_icon"><img
                    src="../assets/images/side_icon_04.png" alt=""></i>渠道管控</a></li>
            <li data-navid="nav_item06" class="layui-nav-item"><a href="javascript:;"><i class="side_icon"><img
                    src="../assets/images/side_icon_06.png" alt=""></i>防伪管理</a></li>
            <li data-navid="nav_item07" class="layui-nav-item" style="display: none;"></li>

        </ul>
        <div class="side-left_bottom">
            <a class="" href="javascript:;"><i class="side_icon"><img
              src="../assets/images/side_icon_08.png" alt=""></i>系统设置
            </a>
            <div class="side-left_bottom_nav">
                <ul>
                    <li><a href="#"><span>微管家</span></a></li>
                    <li class="active"><a  href="#"><span>帐号权限</span></a></li>
                    <li><a href="#"><span>操作日志</span></a></li>
                </ul>
            </div>
        </div>

    </div>
    <div class="side-right">
        <div id="nav_item02" class="nav-tree_item">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item">
                    <a href="3-品牌列表.html"><span>品牌列表</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="3-分类列表.html"><span>分类列表</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="3-规格列表.html"><span>规格列表</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="3-商品列表.html"><span>商品列表</span></a>
                </li>
            </ul>
        </div>
        <div id="nav_item03" class="nav-tree_item">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item">
                    <a href="5-发码订单.html"><span>发码订单</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="5-印刷订单.html"><span>印刷订单</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="5-批次管理.html"><span>批次管理</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="5-扫码主页.html"><span>扫码主页</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="5-扫码明细列表.html"><span>扫码明细</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="5-扫码黑名单列表.html"><span>扫码黑名单</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="5-扫码设置.html"><span>扫码设置</span></a>
                </li>
            </ul>
        </div>
        <div id="nav_item04" class="nav-tree_item">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item">
                    <a href="4-选择模板.html"><span>商品主页</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="4-编辑模板页.html"><span>模板设置</span></a>
                </li>
            </ul>
        </div>
        <div id="nav_item05" class="nav-tree_item">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item">
                    <a href="javascript:;"><span>客户管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="2-客户列表.html"><span>客户列表</span></a></dd>
                        <dd><a href="2.1-客户关系线图.html"><span>关系线图</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><span>授权管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="2-授权审核.html"><span>授权审核</span></a></dd>
                        <dd><a href="2-审核设置.html"><span>审核设置</span></a></dd>
                        <dd><a href="2-品牌授权管理.html"><span>品牌授权管理</span></a></dd>
                        <dd><a href="javascript:;"><span>授权证书管理</span></a></dd>
                        <dd><a href="javascript:;"><span>授权查询</span></a></dd>
                        <dd><a href="javascript:;"><span>授权直达页</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><span>渠道发货</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="2.1-发货管理.html"><span>发货管理</span></a></dd>
                        <dd><a href="2.1-退货记录管理.html"><span>退货管理</span></a></dd>
                        <dd><a href="2.1-仓库管理.html"><span>仓库管理</span></a></dd>
                        <dd><a href="javascript:;"><span>客户库存监控</span></a></dd>
                        <dd><a href="2.1-采集器管理.html"><span>采集器管理</span></a></dd>
                        <dd><a href="2.1-发货设置.html"><span>发货设置</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><span>物流追踪</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="#"><span>窜货监控</span></a></dd>
                        <dd><a href="2.1-物流追踪.html"><span>物流追踪</span></a></dd>
                        <dd><a href="2.1-预警设置.html"><span>预警设置</span></a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div id="nav_item06" class="nav-tree_item">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item">
                    <a href="6-回复管理.html"><span>回复管理</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="6-防伪编辑模板页.html"><span>模板设置</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><span>基础设置</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="6-模板消息配置.html"><span>模板消息配置</span></a></dd>
                        <dd><a href="6-查询次数.html"><span>查询次数</span></a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div id="nav_item07" class="nav-tree_item">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item">
                    <a href="6-账户信息.html">账户信息</a>
                </li>
                <li class="layui-nav-item">
                    <a href="6-资质管理.html">资质管理</a>
                </li>
                <li class="layui-nav-item">
                    <a href="6-修改密码.html">修改密码</a>
                </li>
            </ul>
        </div>
    </div>
</div>
  <div class="page-body">
    <div class="page-container">
      <div class="page-title">
        <h2>商品列表</h2>
      </div>
      <div class="alert-msg">
        <p><i class="icon_tips"></i>取消发布后消费者扫码将看不到此商品的信息</p>
        <span class="close_alert"></span>
      </div>

      <!--列表操作区-->
      <div class="list-handle-bar">
        <div class="layui-row">
          <div class="layui-col-xs8">
            <div class="layui-form">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">筛选</label>
                  <div class="layui-input-inline" style="width: 100px;">
                    <select name="select1">
                      <option value="全部品牌">全部品牌</option>
                      <option value="华为">华为</option>
                      <option value="小米">小米</option>
                      <option value="魅族">魅族</option>
                    </select>
                  </div>
                  <div class="layui-input-inline" style="width: 100px;">
                    <select name="select2">
                      <option value="全部状态">全部分类</option>
                      <option value="已发货">华为</option>
                      <option value="未发货">未发货</option>
                      <option value="已取消">已取消</option>
                    </select>
                  </div>
                  <div class="layui-input-inline" style="width: 100px;">
                    <select name="select3">
                      <option value="授权类型">已上架</option>
                      <option value="未授权">未授权</option>
                      <option value="身份授权">身份授权</option>
                      <option value="区域授权">区域授权</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-form-label">操作</div>
                <div class="layui-input-inline" style="width: auto;">
                  <a href="javascript:selectPro()" class="layui-btn layui-btn-primary primary_btn"><i
                    class="icon_add"></i>添加商品</a>
                </div>
                <div class="layui-input-inline" style="width: auto;">
                  <button class="layui-btn layui-btn-primary">批量上架</button>
                </div>
                <div class="layui-input-inline" style="width: auto;">
                  <button class="layui-btn layui-btn-primary">批量下架</button>
                </div>
                <div class="layui-input-inline" style="width: auto;">
                  <button class="layui-btn layui-btn-primary">导出</button>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-xs4">
            <div class="layui-form">
              <div class="input-group" style="width: 290px;">
                <div class="layui-input-inline" style="width:90px;">
                  <select name="select5">
                    <option value="">客户名称</option>
                    <option value="授权类型">授权类型</option>
                    <option value="代理品牌">代理品牌</option>
                  </select>
                </div>
                <div class="layui-input-inline" style="width: 170px;">
                  <input placeholder="输入客户名称" class="layui-input" type="text">
                </div>
                <div class="layui-input-inline" style="width: 30px;">
                  <button class="layui-btn layui-btn-primary"><i
                    class="layui-icon layui-icon-search"></i></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-list layui-form">
        <div class="table-border">
          <div class="table-radius">
            <table class="layui-table" lay-skin="line">
              <colgroup>
                <col width="40">
              </colgroup>
              <thead>
              <tr>
                <th><input type="checkbox" name="all" lay-skin="primary" title=""></th>
                <th>商品名称</th>
                <th>品牌</th>
                <th>分类</th>
                <th>价格(元)</th>
                <th>总库存</th>
                <th>上下架时间</th>
                <th>状态</th>
                <th>更新时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td><input type="checkbox" name="layTableCheckbox" lay-skin="primary" title=""></td>
                <td>
                  <div class="tdpro_templet">
                    <div class="pro_hd"><img src="../assets/images/48x48.jpg" alt=""></div>
                    <div class="pro_bd">
                      <div class="p1 layui-elip">Nike耐克男鞋科比毒液6科比毒液还素质</div>
                      <div class="p2">102923</div>
                    </div>
                  </div>
                </td>
                <td>雅诗兰黛</td>
                <td>明星系列>男鞋</td>
                <td><b>￥120.00</b></td>
                <td>1000</td>
                <td>2018.12.04 12:12:30</td>
                <td>已上架</td>
                <td>2018.12.04 12:12:30</td>
                <td>
                  <ul class="table_action_group">
                    <li class=""><a href="javascript:;">下架</a></li>
                    <li class=""><a href="javascript:;">编辑</a></li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td><input type="checkbox" name="layTableCheckbox" lay-skin="primary" title=""></td>
                <td>
                  <div class="tdpro_templet">
                    <div class="pro_hd"><img src="../assets/images/48x48.jpg" alt=""></div>
                    <div class="pro_bd">
                      <div class="p1 layui-elip">Nike耐克男鞋科比毒液6科比毒液还素质</div>
                      <div class="p2">102923</div>
                    </div>
                  </div>
                </td>
                <td>雅诗兰黛</td>
                <td>明星系列>男鞋</td>
                <td><b>￥120.00</b></td>
                <td>1000</td>
                <td>2018.12.04 12:12:30</td>
                <td>已上架</td>
                <td>2018.12.04 12:12:30</td>
                <td>
                  <ul class="table_action_group">
                    <li class=""><a href="javascript:;">下架</a></li>
                    <li class=""><a href="javascript:;">编辑</a></li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td><input type="checkbox" name="layTableCheckbox" lay-skin="primary" title=""></td>
                <td>
                  <div class="tdpro_templet">
                    <div class="pro_hd"><img src="../assets/images/48x48.jpg" alt=""></div>
                    <div class="pro_bd">
                      <div class="p1 layui-elip">Nike耐克男鞋科比毒液6科比毒液还素质</div>
                      <div class="p2">102923</div>
                    </div>
                  </div>
                </td>
                <td>雅诗兰黛</td>
                <td>明星系列>男鞋</td>
                <td><b>￥120.00</b></td>
                <td>1000</td>
                <td>2018.12.04 12:12:30</td>
                <td>已上架</td>
                <td>2018.12.04 12:12:30</td>
                <td>
                  <ul class="table_action_group">
                    <li class=""><a href="javascript:;">下架</a></li>
                    <li class=""><a href="javascript:;">编辑</a></li>
                  </ul>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <table class="layui-hide" id="test"></table>
        </div>
      </div>

    </div>
    <!--分页条 列表页引入-->
    <div class="page-footer">
  <div class="layui-box layui-laypage">
    <a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0"><em>←</em></a>
    <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
    <a href="javascript:;" href="javascript:;" data-page="3">3</a>
    <a href="javascript:;" data-page="4">4</a>
    <a href="javascript:;"  data-page="5">5</a>
    <span class="layui-laypage-spr">…</span>
    <a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="10">尾页</a>
    <a href="javascript:;" class="layui-laypage-next" data-page="2"><em>→</em></a>
  </div>
</div>
  </div>
</div>


<!--操作模板-->
<script type="text/html" id="czTemplet">
  <ul class="table_action_group">
    <li><a href="javascript:;">下架</a></li>
    <li><a href="javascript:;">编辑</a></li>
  </ul>
</script>

<!--商品名称模板-->
<script type="text/html" id="spTemplet">
  <div class="tdpro_templet">
    <div class="pro_hd">
      <img src="{{ d.spmc.img }}" alt="">
    </div>
    <div class="pro_bd">
      <div class="p1">{{ d.spmc.title }}</div>
      <div class="p2">{{ d.spmc.stitle }}</div>
    </div>
  </div>
</script>


<!--选择商品弹框-->
<div id="selproPopup" class="zp_popup_container">
  <div>
    <div class="layui-form zpform">
      <div class="alert-msg">
        <p><i class="icon_tips"></i>如果产品库没有您要找的商品，您可以点击“新增商品”</p>
        <span class="close_alert"></span>
      </div>
      <div class="bg-gray mt7" style="padding: 10px 20px;border-radius: 8px;">
        <div class="flexg">
          <span class="before_word">筛选</span>
          <div class="input_group">
            <div style="width: 100px;">
              <select name="select5">
                <option value="全部品牌">全部品牌</option>
                <option value="卡姿兰">卡姿兰</option>
                <option value="雅诗兰黛">雅诗兰黛</option>
              </select>
            </div>
            <input placeholder="输入商品名称" class="layui-input w190" type="text">
            <button class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-search"></i>
            </button>
          </div>
        </div>
        <div class="flexg mt7">
          <span class="before_word">操作</span>
          <a href="3-新增商品.html" class="layui-btn layui-btn-primary primary_btn"><i
            class="icon_add"></i>添加商品</a>
        </div>
      </div>


      <div class="table-border">
        <table class="layui-hide" id="test1"></table>
      </div>
    </div>
  </div>
  <div class="popup-btn"><a class="popbtn0">确定</a><a close-popup class="popbtn1">取消</a></div>
</div>
<script src="../assets/layui/layui.all.js"></script>
<script src="../assets/js/common.js"></script>

<script>
  var element = layui.element;
  var form = layui.form;
  var layer = layui.layer;
  var $ = layui.jquery;
  var table = layui.table;

  // 打开添加商品弹框
  function selectPro() {
    layer.open({
      title: '选择产品库商品',
      skin: 'zp-popup',
      area: '540px',
      type: 1,
      content: $('#selproPopup')
    });
  }

  // 弹框表格
  var data1 = [
    {
      "spmc": {
        "img": "../assets/images/48x48.jpg",
        "title": "Nike耐克男鞋科比毒液6科比毒液还素质",
        "stitle": "102923"
      },
      "pp": "雅诗兰黛",
      "jg": "<b>￥120.00</b>",
    },
    {
      "spmc": {
        "img": "../assets/images/48x48.jpg",
        "title": "Nike耐克男鞋科比毒液6科比毒液还素质",
        "stitle": "102923"
      },
      "pp": "雅诗兰黛",
      "jg": "<b>￥120.00</b>",
    },
    {
      "spmc": {
        "img": "../assets/images/48x48.jpg",
        "title": "Nike耐克男鞋科比毒液6科比毒液还素质",
        "stitle": "102923"
      },
      "pp": "雅诗兰黛",
      "jg": "<b>￥120.00</b>",
    },
    {
      "spmc": {
        "img": "../assets/images/48x48.jpg",
        "title": "Nike耐克男鞋科比毒液6科比毒液还素质",
        "stitle": "102923"
      },
      "pp": "雅诗兰黛",
      "jg": "<b>￥120.00</b>",
    },
    {
      "spmc": {
        "img": "../assets/images/48x48.jpg",
        "title": "Nike耐克男鞋科比毒液6科比毒液还素质",
        "stitle": "102923"
      },
      "pp": "雅诗兰黛",
      "jg": "<b>￥120.00</b>",
    }
  ];

  table.render({
    elem: '#test1',
    cellMinWidth: 80,
    height: 316,
    skin: 'line',
    cols: [[
      {type: 'radio'},
      {field: 'spmc', width: 270, title: '商品名称', templet: '#spTemplet'},
      {field: 'pp', width: 90, title: '品牌'},
      {field: 'jg', width: 90, title: '价格(元)'},
    ]],
    data: data1
  });


  // 商品列表表格
  var data = [
    {
      "spmc": {
        "img": "../assets/images/48x48.jpg",
        "title": "Nike耐克男鞋科比毒液6科比毒液还素质",
        "stitle": "102923"
      },
      "pp": "雅诗兰黛",
      "fl": "明星系列>男鞋",
      "jg": "<b>￥120.00</b>",
      "zkc": "1000",
      "ssjsj": "2018.12.04 12:12:30",
      "zt": "已上架",
      "gxsj": "2018.12.04 12:12:30",
    },
    {
      "spmc": {
        "img": "../assets/images/goods01.jpg",
        "title": "【get水润牛奶肌】毒液6科比毒",
        "stitle": "102923"
      },
      "pp": "雅诗兰黛",
      "fl": "明星系列>男鞋",
      "jg": "<b>￥120.00</b>",
      "zkc": "1000",
      "ssjsj": "2018.12.04 12:12:30",
      "zt": "已上架",
      "gxsj": "2018.12.04 12:12:30",
    }
  ];

  table.render({
    elem: '#test',
    skin: 'line',
    cellMinWidth: 80,
    cols: [[
      {type: 'checkbox'},
      {field: 'spmc', width: 280, title: '商品名称', templet: '#spTemplet'},
      {field: 'pp', width: 180, title: '品牌'},
      {field: 'fl', width: 180, title: '分类'},
      {field: 'jg', width: 180, title: '价格(元)'},
      {field: 'zkc', title: '总库存', minWidth: 100},
      {field: 'ssjsj', title: '上下架时间'},
      {field: 'zt', title: '状态'},
      {field: 'gxsj', title: '更新时间'},
      {field: 'cz', title: '操作', minWidth: 180, templet: '#czTemplet'}
    ]],
    data: data
  });

  /*删除弹框*/
  function del(id) {

    layer.confirm('您是否要删除林<b>晓峰旗</b>下的“<b>雅诗兰黛</b>”品牌记录？', {
      skin: 'zp-popup',
      btn: ['删除', '取消'] //按钮
    }, function () {
      //确定删除
      layer.msg('删除成功！', {icon: 1});
    }, function () {
      //取消
    });
  }

  function goAuthor() {
    var index = layer.confirm('您当前未创建品牌级别信息，请前往“<b>品牌授权</b>”进行设置', {
      skin: 'zp-popup',
      btn: ['去设置', '取消'] //按钮
    }, function () {
      //确定
      layer.closeAll();
      layer.open({
        title: '授权升级',
        skin: 'zp-popup',
        type: 1,
        content: $('#upgradePopup')
      });

    }, function () {
      //取消
    });
  }

  function opentDongjie() {
    layer.open({
      title: '冻结提示',
      skin: 'zp-popup',
      type: 1,
      content: $('#dongjiePopup')
    });
  }

  function opentShengji() {
    layer.open({
      area: '600px',
      title: '升级审核',
      skin: 'zp-popup',
      type: 1,
      content: $('#shengjiPopup')
    });
  }

  $(document).on('click', '#next01', function () {
    //设置升级身份下一步
    $(".step_01").hide();
    $(".step_03").hide();
    $(".step_02").show();
  });
  $(document).on('click', '#next02', function () {
    //设置升级身份下一步
    $(".step_01").hide();
    $(".step_02").hide();
    $(".step_03").show();
  });
  $(document).on('click', '#next03', function () {
    //设置升级身份完成
    layer.closeAll();
  });

  $(document).on('click', '#dongji_btn', function () {
    //冻结
    layer.closeAll();
  });
  /*当前导航位置*/
  currNav(2, 4, 0);
</script>


</body>
</html>